<template>
  <div>
    <a-modal
      :title="show ? `编辑${name}` : `新增${name}`"
      :visible="visible"
      :width="520"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="$emit('update:visible', false)"
    >
      <a-form :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-form-item :label="name === '工种' ? '工种名称' : '考勤状态'">
          <a-input
            :maxLength="20"
            placeholder="不得超过20个字"
            style="width: 248px;"
            v-decorator="['configurationStatus', { rules: [{ required: true, message: '工种名称不能为空' }] }]"
            v-if="name === '工种'"
          />
          <a-input-number
            :max="99999999999999999999"
            :min="0"
            :precision="0"
            placeholder="只能输入数字"
            class="inputs"
            style="width: 248px;"
            v-decorator="['configurationStatus', { rules: [{ required: true, message: '考勤状态不能为空' }] }]"
            v-else
          />
        </a-form-item>
        <a-form-item :label="name === '工种' ? '工种说明' : '状态说明'">
          <a-input :maxLength="20" placeholder="不得超过20个字" style="width: 248px;" v-decorator="['configurationExplain']" />
        </a-form-item>
        <a-form-item :label="name === '工种' ? '基本工资' : '工资影响'">
          <a-input-number
            :step="0.01"
            placeholder="请输入"
            style="width: 100px;"
            v-decorator="[
              'sallaryImpact',
              { rules: [{ required: true, message: name === '工种' ? '基本工资不能为空' : '工资影响不能为空' }] }
            ]"
          />
          {{ name === "工种" ? "元" : "%" }}
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { postAttendanceSallaryTemplateItems, putAttendanceSallaryTemplateItems } from "../api";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: ""
    },
    id: {
      type: String,
      default: ""
    },
    jsonVal: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    visible(v) {
      if (v && this.jsonVal.id) {
        setTimeout(() => {
          this.form.setFieldsValue({
            configurationStatus: this.jsonVal.configurationStatus,
            configurationExplain: this.jsonVal.configurationExplain,
            sallaryImpact: this.jsonVal.sallaryImpact
          });
        });
        this.show = true;
      } else {
        this.show = false;
        this.form.resetFields();
      }
    }
  },
  data() {
    return {
      form: this.$form.createForm(this, {}),
      confirmLoading: false,
      show: false
    };
  },
  methods: {
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true;
          values.attendanceSallaryTemplateId = this.id;
          values.configurationName = this.name;
          if (this.jsonVal.id) {
            this.onPutAttendanceSallaryTemplateItems(values);
          } else {
            this.onPostAttendanceSallaryTemplateItems(values);
          }
        }
      });
    },
    async onPostAttendanceSallaryTemplateItems(v) {
      try {
        await postAttendanceSallaryTemplateItems({
          ...v,
          isSystemConfigure: false
        });
        this.confirmLoading = false;
        this.$emit("upDate");
        this.$emit("update:visible", false);
      } catch (err) {
        console.log("error log --> ", err);
        this.confirmLoading = false;
      }
    },
    async onPutAttendanceSallaryTemplateItems(v) {
      try {
        await putAttendanceSallaryTemplateItems({
          ...v,
          id: this.jsonVal.id
        });
        this.confirmLoading = false;
        this.$emit("upDate");
        this.$emit("update:visible", false);
      } catch (err) {
        console.log("error log --> ", err);
        this.confirmLoading = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.inputs {
  ::v-deep .ant-input-number-handler-wrap {
    display: none;
  }
}
</style>
